<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>图片标签</title>
</head>
<body>
    <!-- 
         图片标签： img image    行内块元素
          src: 图片路径存放的地方
              网络路径：    注意： 网络路径一定以http或https开头
                 https://ts1.cn.mm.bing.net/th/id/R-C.ec0ef830633b555e3530ae1d90e51770?rik=LmVSJBEtCgNlww&riu=http%3a%2f%2fi.gtimg.cn%2fqqlive%2fimg%2fjpgcache%2ffiles%2fqqvideo%2f8%2f86l8t7uke1vo82a.jpg&ehk=RRB8VFXGj9qfOLNggIbBOdxJkoMJyS3%2ft44Pet9SptQ%3d&risl=&pid=ImgRaw&r=0
              本地路径： 自己电脑上的路径
                    绝对路径：
                        D:\2502\01HTML\1.webp5
                        D:/2502/01HTML/1.webp
                        两种写法都可以， 但是要统一使用，正斜线为规范
                    相对路径：
                        ./ 点 斜线  当前文件夹下
                        ../ 点点 斜线      上一级路径 
                   ../2.webp
                   ../小黑子/3.webp

                   alt：图片加载不出来的时候显示
                   title：鼠标放在图片上的提示
                   width: 宽度
                   height： 高度

                   宽高要注意：
                        1.如果手动设置图片宽高，可能导致图片变形（因为设置的宽高跟原图不成比例）
                        2.如果不行让图片变形，还要设置宽高其中的一个，另一个，浏览器会自动等比例缩放


     -->
     <!-- 网络路径 -->
     	<img src="https://ts1.cn.mm.bing.net/th/id/R-C.ec0ef830633b555e3530ae1d90e51770?rik=LmVSJBEtCgNlww&riu=http%3a%2f%2fi.gtimg.cn%2fqqlive%2fimg%2fjpgcache%2ffiles%2fqqvideo%2f8%2f86l8t7uke1vo82a.jpg&ehk=RRB8VFXGj9qfOLNggIbBOdxJkoMJyS3%2ft44Pet9SptQ%3d&risl=&pid=ImgRaw&r=0" alt="" width="200px" height="400">
     	<!-- 绝对路径 -->
     	<img src="D:\2502\01HTML\1.webp" alt="" width="200px" neight="400" title="吹泡泡">
     	<!-- 相对路径 -->
     	<img src="./1.webp" alt="hjdsbauibd">
     	<img src="../2.webp" alt="">
     	<img src="../小黑子/3.webp" alt="" width="300px" neight="400" title="五星上将--麦克阿瑟">
     	<img src="../D:/拖油瓶/5.webp" alt="宇将军又进去吃国家饭了">
        <img  id="oldba"src="https://img1.baidu.com/it/u=1324910368,1294694211&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=930" alt="" >
</body>
</html>